<template>
  <el-card header="基础用法和事件">
    <YsTable :data="data" :page="page" :column="column" @row-add="rowAdd" @row-del="rowDel" @row-edit="rowEdit" @current-change="currentChange" @size-change="sizeChange" />
  </el-card>
</template>

<script setup lang="ts">
import { ref,unref } from "vue"
import type { YsTableColumn, YsPageType } from "ys-crud/packages/Table"
import { ElMessage } from "element-plus";
import { computed } from 'vue';
const data = ref([{
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}])


const page = ref<YsPageType>({
  total: 100,
  currentPage: 1,
  pageSize: 20,
  pageSizes: [10, 20, 30, 40, 60]
})


const column = computed<YsTableColumn[]>(() => {
  return [
    { label: '数据库名称', prop: 'a', width: '100px', showOverflowTooltip: true},
    { label: '数据表名称', prop: 'tableName' },
    { label: '表中文名称', prop: 'tableChName' },
    { label: '产品线', prop: 'productName' },
    { label: '主题域', prop: 'domainName' },
    { label: '创建时间', prop: 'createTime' },
    { label: '创建人', prop: 'createBy' }
  ]
})



const rowAdd = () => {
  ElMessage.success('新增')
}

const rowEdit = () => {
  ElMessage.success('编辑')

}

const rowDel = () => {
  ElMessage.success('删除')
}

const currentChange = (val) => {
  ElMessage.success(`currentChange => currentPage:${val}`)
  console.log(unref(page));
}

const sizeChange = (val) => {
  ElMessage.success(`sizeChange => pageSize:${val}`)
}

</script>

<style lang="scss" scoped></style>
